<template>
  <view class="container">
    <!-- Header -->
    <view class="header">
      <view class="back-button" @click="goBack">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="15 18 9 12 15 6"></polyline>
        </svg>
        <text>返回</text>
      </view>
    </view>

    <!-- Video Player -->
    <view class="video-container">
      <video id="myVideo" :src="videoSrc" :poster="videoPoster" :controls="false" :show-center-play-btn="false"
        :enable-progress-gesture="true" :show-fullscreen-btn="false" :show-play-btn="false" object-fit="contain"
        @timeupdate="onTimeUpdate" @loadedmetadata="onLoadedMetadata" @ended="onVideoEnded" @pause="isPlaying = false"
        @play="isPlaying = true"></video>

      <!-- Custom Video Controls -->
      <view class="video-controls">
        <view class="progress-bar-container">
          <view class="progress-bar-bg"></view>
          <view class="progress-bar" :style="{ width: `${progress}%` }"></view>
        </view>
        <view class="controls-row">
          <view class="left-controls">
            <view class="control-button play-button" @click="togglePlay">
              <!-- Play Icon -->
              <svg v-if="!isPlaying" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polygon points="5 3 19 12 5 21 5 3"></polygon>
              </svg>
              <!-- Pause Icon -->
              <svg v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="6" y="4" width="4" height="16"></rect>
                <rect x="14" y="4" width="4" height="16"></rect>
              </svg>
            </view>
            <view class="control-button" @click="toggleMute">
              <!-- Volume Icon -->
              <svg v-if="!isMuted" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
                <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
              </svg>
              <!-- Muted Icon -->
              <svg v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                <line x1="23" y1="9" x2="17" y2="15"></line>
                <line x1="17" y1="9" x2="23" y2="15"></line>
              </svg>
            </view>
          </view>
          <view class="time-display">
            {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
          </view>
        </view>
      </view>
    </view>

    <!-- Course Title and Info -->
    <view class="course-info">
      <text class="course-title">{{ videoTitle }}</text>
      <view class="course-tag">
        <text class="tag-text">AI技术</text>
      </view>
    </view>

    <!-- Course Introduction -->
    <view class="course-intro">
      <text class="section-title">课程简介</text>
      <text class="intro-text">
        本课程全面介绍AIGC（AI生成内容）技术的原理与应用，从基础概念到实战案例，帮助学员掌握当下最前沿的AI技术。课程内容涵盖文本生成、图像生成、音频生成等多个领域，并结合实际案例进行讲解，让学员能够快速上手并应用到实际工作中。
      </text>

      <view class="course-content">
        <text class="content-title">课程内容包括：</text>
        <view class="content-list">
          <view class="list-item">
            <view class="item-number">
              <text>1</text>
            </view>
            <text class="item-text">AIGC技术概述与发展历程</text>
          </view>
          <view class="list-item">
            <view class="item-number">
              <text>2</text>
            </view>
            <text class="item-text">文本生成技术与应用（GPT模型、Prompt工程等）</text>
          </view>
          <view class="list-item">
            <view class="item-number">
              <text>3</text>
            </view>
            <text class="item-text">图像生成技术与应用（扩散模型、Stable Diffusion等）</text>
          </view>
          <view class="list-item">
            <view class="item-number">
              <text>4</text>
            </view>
            <text class="item-text">AIGC在各行业的实际应用案例分析</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// Declare uni if it's not already available (e.g., in a browser environment)
// This avoids errors when running outside of the uni-app environment
const uni = typeof uni !== 'undefined' ? uni : {};

// Get URL parameters
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
const options = currentPage.$page?.options || {};

// Video state
const videoSrc = ref(options.videoUrl || 'https://imagecgr.oss-cn-beijing.aliyuncs.com/uploade.mp4');
const videoTitle = ref(decodeURIComponent(options.title || 'AIGC人工智能生成内容技术与应用实战'));
const videoPoster = ref('/static/poster.png'); // Replace with your poster image
const isPlaying = ref(false);
const isMuted = ref(false);
const currentTime = ref(0);
const duration = ref(0);
const progress = ref(0);
let videoContext = null;

// Format time helper function
const formatTime = (time) => {
  if (!time) return '0:00';
  const minutes = Math.floor(time / 60);
  const seconds = Math.floor(time % 60);
  return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
};

// Initialize video context
onMounted(() => {
  // #ifdef MP-WEIXIN
  videoContext = uni.createVideoContext('myVideo');
  // #endif

  // #ifdef H5
  const videoElement = document.getElementById('myVideo');
  if (videoElement) {
    videoContext = videoElement;
  }
  // #endif
});

// Clean up
onUnmounted(() => {
  videoContext = null;
});

// Video control functions
function togglePlay() {
  if (!videoContext) return;

  // #ifdef MP-WEIXIN
  if (isPlaying.value) {
    videoContext.pause();
  } else {
    videoContext.play();
  }
  // #endif

  // #ifdef H5
  if (isPlaying.value) {
    videoContext.pause();
  } else {
    videoContext.play();
  }
  // #endif

  isPlaying.value = !isPlaying.value;
}

function toggleMute() {
  if (!videoContext) return;

  // #ifdef MP-WEIXIN
  if (isMuted.value) {
    videoContext.volume = 1;
  } else {
    videoContext.volume = 0;
  }
  // #endif

  // #ifdef H5
  if (isMuted.value) {
    videoContext.muted = false;
  } else {
    videoContext.muted = true;
  }
  // #endif

  isMuted.value = !isMuted.value;
}

function onTimeUpdate(e) {
  // #ifdef MP-WEIXIN
  currentTime.value = e.detail.currentTime || 0;
  // #endif

  // #ifdef H5
  currentTime.value = e.target.currentTime || 0;
  // #endif

  if (duration.value > 0) {
    progress.value = (currentTime.value / duration.value) * 100;
  }
}

function onLoadedMetadata(e) {
  // #ifdef MP-WEIXIN
  duration.value = e.detail.duration || 0;
  // #endif

  // #ifdef H5
  duration.value = e.target.duration || 0;
  // #endif
}

function onVideoEnded() {
  isPlaying.value = false;
  currentTime.value = 0;
  progress.value = 0;
}

function goBack() {
  console.log("aaaaa")
}

// Expose the formatTime function to the template

</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f8fafc;
}

/* Header */
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 12px 16px;
}

.back-button {
  display: flex;
  align-items: center;
  color: #334155;
}

.back-button text {
  margin-left: 4px;
}

/* Video Player */
.video-container {
  position: relative;
  width: 100%;
  background-color: #000000;
  aspect-ratio: 16/9;
}

video {
  width: 100%;
  height: 100%;
}

.video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.progress-bar-container {
  position: relative;
  height: 4px;
  margin-bottom: 8px;
}

.progress-bar-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #1e40af;
  transition: width 0.1s;
}

.controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.control-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.play-button {
  background-color: #1e40af;
  border-radius: 50%;
}

.time-display {
  color: #ffffff;
  font-size: 14px;
}

/* Course Info */
.course-info {
  padding: 16px;
  background-color: #ffffff;
}

.course-title {
  font-size: 18px;
  font-weight: bold;
  color: #1e293b;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-tag {
  display: inline-flex;
  margin-top: 8px;
  padding: 4px 8px;
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
}

.tag-text {
  font-size: 12px;
  color: #1e40af;
}

/* Course Introduction */
.course-intro {
  margin-top: 8px;
  padding: 16px;
  background-color: #ffffff;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #1e293b;
  margin-bottom: 12px;
  display: block;
}

.intro-text {
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
  display: block;
}

.course-content {
  margin-top: 16px;
}

.content-title {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  margin-bottom: 8px;
  display: block;
}

.content-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.list-item {
  display: flex;
  align-items: flex-start;
}

.item-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #eff6ff;
  margin-right: 8px;
  margin-top: 2px;
  flex-shrink: 0;
}

.item-number text {
  font-size: 12px;
  color: #1e40af;
}

.item-text {
  font-size: 14px;
  color: #475569;
  flex: 1;
}
</style>